<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>YAML | Example &quot;Flexible Grids&quot;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_grids.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">

	#main {padding: 10px 20px;}

</style>
</head>
<body>
<div id="page_margins">
	<div id="page">
		<div id="header">
			<div id="topnav">
				<!-- start: skip link navigation -->
				<a class="skip" href="#navigation" title="skip link">Skip to the navigation</a><span class="hideme">.</span>
				<a class="skip" href="#content" title="skip link">Skip to the content</a><span class="hideme">.</span>
				<!-- end: skip link navigation -->
				<span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span> </div>
			<h1>Example | Beispiel <em>&quot;Flexible Grids &quot;</em> </h1>
			<span>YAML &#8226; (X)HTML/CSS Framework</span>		</div>
		<!-- begin: main navigation #nav -->
		<div id="nav"> <a id="navigation" name="navigation"></a>
			<!-- skiplink anchor: navigation -->
			<div id="nav_main">
				<ul>
					<li id="current"><a href="#">Button 1</a></li>
					<li><a href="#">Button 2</a></li>
					<li><a href="#">Button 3</a></li>
					<li><a href="#">Button 4</a></li>
					<li><a href="#">Button 5</a></li>
				</ul>
			</div>
		</div>
		<!-- end: main navigation -->
		<!-- begin: main content area #main -->
		<div id="main"> <a id="content" name="content"></a>
			<!-- skiplink anchor: Content -->
			<div class="subcolumns">
				<div class="c66l">
					<div class="subcl">
						<h2>Blog</h2>
						<h4>Entry #1 </h4>
						<p><strong>Block 1:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
						<p><a href="#">more ...</a> </p>
						<h4>Entry #2</h4>
						<p><strong>Block 1:</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
						<p><a href="#">more ...</a> </p>
						<h4>Entry #3</h4>
						<p><strong>Block 1:</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
						<p><a href="#">more ...</a> </p>
						<p>&nbsp;</p>
					</div>
				</div>
				<div class="c33r">
					<div class="subcolumns">
						<div class="c50l">
							<div class="subcr">
								<h2>Sidebar</h2>
								<p><strong>Block 1:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. ... </p>
							</div>
						</div>
						<div class="c50r">
							<div class="subcr">
								<h2>Comments</h2>
								<p><strong>Block 2:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. ... </p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="subcolumns coolsubcol">
				<div class="c33l">
					<div class="subcl">
						<h3>Article Archive </h3>
						<p><strong>Block 1:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.   ... </p>
					</div>
				</div>
				<div class="c33l">
					<div class="subcl">
						<h3>Latest Comments </h3>
						<p><strong>Block 2:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. ... </p>
					</div>
				</div>
				<div class="c33r">
					<div class="subcr">
						<h3>Monthly Archive </h3>
						<p><strong>Block 3:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.  ... </p>
					</div>
				</div>
			</div>
		</div>
		<!-- end: #main -->
		<!-- begin: #footer -->
		<div id="footer">Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a></div>
		<!-- end: #footer -->
	</div>
</div>
</body>
</html>
